<template>
  <div>
    <el-table border style="width: 100%" :data="skuInfoList">
      <el-table-column
        type="index"
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="300px">
        <template v-slot="{ row }">
          <!-- 上架 -->
          <el-tooltip
            class="box-item"
            effect="dark"
            content="上架"
            placement="top"
            v-if="row.isSale === 0"
          >
            <el-button
              title="上架"
              :icon="Top"
              size="small"
              type="success"
              @click="skuOnSale(row)"
            ></el-button>
          </el-tooltip>

          <!-- 下架 -->
          <el-tooltip
            class="box-item"
            effect="dark"
            content="下架"
            placement="top"
            v-else
          >
            <el-button
              title="下架"
              :icon="Bottom"
              size="small"
              type="danger"
              @click="skuCancleSale(row)"
            ></el-button>
          </el-tooltip>

          <!-- 修改SKU -->
          <el-tooltip
            class="box-item"
            effect="dark"
            content="修改SKU"
            placement="top"
          >
            <el-button
              title="修改SKU"
              :icon="Edit"
              size="small"
              type="primary"
            ></el-button>
          </el-tooltip>

          <!-- 查看SKU详情 -->
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看SKU详情"
            placement="top"
          >
            <el-button
              title="查看SKU详情"
              :icon="InfoFilled"
              size="small"
              type="info"
              @click="getSkuInfo(row.id)"
            ></el-button>
          </el-tooltip>

          <!-- 删除SKU -->
          <el-popconfirm
            title="你确定要删除此项Sku吗?"
            @confirm="deleteSkuInfo(row.id)"
          >
            <template #reference>
              <el-button
                title="删除SKU"
                :icon="Delete"
                size="small"
                type="danger"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部分页部分 -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 20]"
      layout=" prev, pager, next, jumper, ->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 查看SKU详情 抽屉效果 -->
    <el-drawer v-model="drawer" title="查看SKU详情">
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">名称</el-col>
        <el-col :span="15">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">描述</el-col>
        <el-col :span="15">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">价格</el-col>
        <el-col :span="15">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">平台属性</el-col>
        <el-col :span="15">
          <el-tag
            v-for="attr in skuInfo.skuAttrValueList"
            :key="attr.id"
            style="margin-right: 8px"
          >
            {{ attr.attrName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">销售属性</el-col>
        <el-col :span="15">
          <el-tag
            v-for="saleAttr in skuInfo.skuSaleAttrValueList"
            :key="saleAttr.id"
            style="margin-right: 8px"
          >
            {{ saleAttr.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom: 15px">
        <el-col :span="5">商品图片</el-col>
        <el-col :span="15">
          <el-carousel>
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <img :src="item.imgUrl" style="width: 100%; height: 100%" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script lang="ts">
export default {
  name: "Sku",
}
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { Delete, Edit, InfoFilled, Bottom, Top } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import {
  reqGetAllSkuInfoData,
  reqSkuOnSale,
  reqSkuCancleSale,
  reqDeleteSkuInfo,
  reqGetOneSkuInfo,
} from "@/api/product/sku.ts"

// 分页器相关变量
const currentPage = ref<number>(1) //当前的页码
const pageSize = ref<number>(5) //每页要显示的数量
const total = ref<number>(0) //总条数

// 抽屉相关变量
const drawer = ref(false)
// 定义一个skuInfo对象 用来渲染抽屉中的效果
const skuInfo = ref([])

const skuInfoList = ref([])

// 1.封装获取sku列表数据的函数
const getSkuInfoList = async () => {
  const result = await reqGetAllSkuInfoData(currentPage.value, pageSize.value)
  skuInfoList.value = result.records
  total.value = result.total
}

// 2.在页面挂载时调用函数，获取数据
onMounted(() => {
  getSkuInfoList()
})

// 分页相关的函数
// 3. 更改每页显示条数时触发的事件处理程序
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val
  currentPage.value = 1
  getSkuInfoList()
}
// 4. 根据当前页码进行切换时触发的函数
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value = val
  getSkuInfoList()
}

// 5.上架商品
const skuOnSale = async row => {
  // 调用接口函数
  await reqSkuOnSale(row.id)
  // 提示用户
  ElMessage.success("商品上架成功")

  row.isSale = 1 - row.isSale
}

// 6.下架商品
const skuCancleSale = async row => {
  // 调用接口函数
  await reqSkuCancleSale(row.id)
  // 提示用户
  ElMessage.success("商品下架成功")
  // 调用函数，重新渲染数据
  row.isSale = 1 - row.isSale
}

// 7.删除SKU
const deleteSkuInfo = async id => {
  await reqDeleteSkuInfo(id)
  // 提示用户
  ElMessage.success("商品删除成功")
  // 调用函数，重新渲染数据
  getSkuInfoList()
}

// 8.查看sku详情 抽屉
const getSkuInfo = async (id: number) => {
  const result = await reqGetOneSkuInfo(id)
  skuInfo.value = result
  drawer.value = true
}
</script>

<style></style>
